<template>
	<view style="" class="conn">
		<view style="display: flex;justify-content: center">
			<u-tabs :list="list1" @click="click" :current="type"></u-tabs>
		</view>
		<view class="a">
			<view v-for="item in list" class="item.id" @click="get(item.id)"
				:style="{'background-color': item.id===index?style:'' }">
				<view style="display: flex;align-items: center;justify-content: center">
					<u-icon :name="item.icon" color="#231e11" size="28"></u-icon>
				</view>
				<view>{{item.name}}</view>
			</view>
		</view>

		<u-keyboard ref="uKeyboard" mode="number" :show="show" @change="valChange" @cancel="show=false"
			@confirm="confirm" @backspace="backspace()">
			<view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view style="display: flex;justify-content: space-between;">
						<text mode="date" class="item2">{{date}}</text>
						<view class="item2">
							<u--text mode="price" :text="price"></u--text>
						</view>
					</view>
				</picker>
			</view>
			<u--input placeholder="请输入备注" border="surround" v-model="value" prefixIcon="file-text"></u--input>
		</u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				list1: [{
					name: '支出',
				}, {
					name: '收入',
				}],
				id: null,
				list: [],
				index: 1,
				style: '#fffca5',
				type: 0,
				show: false,
				date: currentDate,
				price: '',
				value: '',
				user: uni.getStorageSync("user"),
			}
		},
		onLoad(option) {
			if (option.id !== undefined) {
				this.date = option.createTime
				this.index = Number(option.tabId)
				this.price = option.price
				this.value = option.fun
				this.type = option.type
				this.id = option.id
				this.show = true
			}
			this.getList()
		},
		methods: {
			backspace() {
				if (this.price.length>0) {
					this.price = this.price.substr(0, this.price.length - 1);
				}
			},
			async confirm() {
				const parm = {
					fun: this.value,
					price: this.price,
					famId: uni.getStorageSync("user").famId,
					tabId: this.index,
					type: this.type,
					id: this.id,
					createTime: this.date,
					userId:this.user.id
				}
				const res = await this.$myRuquest({
					url: '/wexinLogin/famaccount/accountAdd',
					method: 'post',
					data: parm
				})
				if (res.data.data === true) {
					uni.navigateBack()
					uni.showToast({
						title: "操作成功",
						icon: "none"
					})
				} else {
					uni.showToast({
						title: "操作失败，联系管理员",
						icon: "none"
					})
				}
			},
			async getList() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/account/accountTbList?type=' + this.type,
					method: 'post',
				})
				this.list = res.data.data
			},
			get(id) {
				this.show = true
				this.index = id
			},
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.price += val;
			},
			click(item) {
				if (item.name === "支出") {
					this.type = 0
					this.getList()
				} else {
					this.type = 1
					this.getList()
				}

			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
		}
	}
</script>

<style>
	.a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 30rpx;
	}

	.conn {
		margin-top: 95rpx;
		margin-left: 65rpx;
		margin-right: 65rpx;
	}

	.item {
		width: calc(25% - 28px);
		/* 每行显示3个元素，总宽度减去间距 */
		margin: 7px;
		/* 间距 */
		background-color: #e8e8e8;
		text-align: center;
		border-radius: 10%;
	}

	.item2 {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 26rpx;
		margin-right: 20rpx;
		background-color: #d3d3d3;
		text-align: center;
	}
</style>
